<template>
  <div class="app-container">

    <!-- vxe检索数据组件 -->
    <search-form
      ref="searchForm"
      :formSearchData.sync="formSearchData"
      @searchEventEmit="searchEventEmit"
      @resetSearchEventEmit="resetSearchEventEmit"
    >
    </search-form>

    <!-- 表格组件 -->
    <ex-base-table
      ref="exBaseTable"
      :tableColumn="tableColumn"
      :tableData="tableData"
      :loading.sync="loading"
      :isVxeColSeq="false"
      :isVxeToolbar="true"
      :isVxeCheckbox="false"
      :isVxeHandleS="true"
      :curveDeadlineSetListUnitArr="curveDeadlineSetListUnitArr"
      @handleCreateEmit="handleCreateEmit"
      @handleUpdateEmit="handleUpdateEmit"
      @handleRmoveColEmit="handleRmoveColEmit"
      @customSortMethodEmit="customSortMethodEmit"
    >
    </ex-base-table>

    <!-- 分页组件 -->
    <Pagination
      :hidden="true"
      v-show="tablePage.totalResult>0"
      :total="tablePage.totalResult"
      :page.sync="tablePage.currentPage"
      :limit.sync="tablePage.pageSize"
      @pagination="pageFindList"
    />

    <!-- 表单提价组件 -->
    <submit-form
      ref="submitForm"
      :dialogFormVisible.sync="dialogFormVisible"
      :dialogStatus="dialogStatus"
      :formSubmitData="formSubmitData"
      :lpOptions="lpOptions"
      :cvCodeOptions="cvCodeOptions"
      :curveDeadlineSetList="curveDeadlineSetList"
      :curveDeadlineSetListUnit="curveDeadlineSetListUnit"
      @findTremCodeWEmit="findTremCodeWEmit"
      @handleFromUpdateDataEmit="handleFromUpdateDataEmit"
      @handleFromCreateDataEmit="handleFromCreateDataEmit"
      @resetFormDataEmit="resetFormSubmitData"
    >
    </submit-form>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'
import XEUtils from 'xe-utils'
import {
  addCurve,
  deleteParamterszi,
  findCurve,
  findCvCode,
  findTremCode,
  findUile,
  updateCurve,
  delCurve
} from './service/baseApi'
// 基础表格组件
import ExBaseTable from './components/ExBaseTable'
// 分页
import Pagination from '@/components/Pagination'
// 文章表单
import SubmitForm from './components/SubmitForm'
// 检索表单
import SearchForm from './components/SearchForm'

import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'
import lpoptions from '@/views/mixins/lpoptions'

export default {
  name: 'vxe-basetable',
  mixins: [resetFormSubmitData, lpoptions],
  components: {
    //PageHeaderLayout,
    ExBaseTable,
    Pagination,
    SubmitForm,
    SearchForm
  },
  props: {
    /* 当前行数据 */
    currentRow: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  // 定义属性
  data() {
    return {
      // 检索条件
      formSearchData: {},
      // 排除条件
      sortField: '',
      sortFlag: '',

      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: '',
      // 表单数据对象
      formSubmitData: {
        id: '',
        lp_code: "",
        s_date: "",
        e_date: "",
        cv_code: "",
        adj_type: "",
        remark: "",
      },
      initFormSubmitData: {
        lp_code: "",
        s_date: "",
        e_date: "",
        cv_code: "",
        adj_type: "",
        remark: "",
      },
      cvCodeOptions: [], // 转移曲线编号options
      // 曲线期限设置参数
      curveDeadlineSetList: [],
      // 曲线期限设置参数的单位
      curveDeadlineSetListUnit: [],
      curveDeadlineSetListUnitArr: [],
      /* 是否是更新DOM初始化操作 */
      isUpdateDOMInit: false,
      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10,  // 每一页页数
        totalResult: 0
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [],  //表格数据

      /* 子表相关 */
      DialogSonTableVisible: false,
    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {
    currentRow() {
      this.findList()
    }
  },
  // 方法集合
  methods: {
    /* API数据操作相关 */
    findFindCvCode() {
      findCvCode().then(({data}) => {
        this.cvCodeOptions = data.rows
      })
    },
    findFindUile() {
      findUile().then(({data}) => {
        console.log('data.rows123123', data.rows)
        this.curveDeadlineSetListUnit = data.rows
        data.rows.forEach(item => {
          this.curveDeadlineSetListUnitArr[`${item.code}`] = item.name
        });

      })
    },
    // 清除曲线参数和值的表单元素
    clearCurveDeadline(callBack) {
      // 初始化-曲线期限设置参数
      this.curveDeadlineSetList = []
      // 初始化-删除开头为"term_"的元素
      XEUtils.objectEach(this.formSubmitData, (item, key) => {
        if (key.startsWith("term_")) {
          // delete this.formSubmitData[`${key}`];
          this.$delete(this.formSubmitData, key)
          console.log('this.formSubmitData[`${key}`]', key);
        }
      })
      callBack()
    },
    // 获取转移曲线编号对应表单参数
    findTremCodeWEmit(nObj, dialogStatus) {

      this.clearCurveDeadline(() => {
        findTremCode({
          cv_code: this.formSubmitData.cv_code,
          s_date: this.formSubmitData.s_date,
          e_date: this.formSubmitData.e_date
        }).then(({data}) => {
          const dataRows = data.rows
          if (dataRows) {
            this.curveDeadlineSetList = dataRows
            console.log("this.formSubmitDatathis.formSubmitDatathis.formSubmitData333", this.formSubmitData);
            // 判断是否是第一次触发修改
            if (!XEUtils.isEmpty(this.formSubmitData.adj_string)) {
              // 初试化-增加开头为"term_"的元素 formSubmitDataCom[`term_${item.term_code}`]
              XEUtils.objectEach(this.formSubmitData.adj_string, (item, key) => {
                this.$set(this.formSubmitData, `term_${item.term_code}`, item.adj_value)
                this.$set(this.formSubmitData, `term_${item.term_code}_adj_type`, item.adj_type)
              })
              this.$delete(this.formSubmitData, 'adj_string')
            } else {
              // 初始化-增加开头为"term_"的元素
              // formSubmitDataCom[`term_${item.term_code}`]
              XEUtils.objectEach(data.rows, (item, key) => {
                // 初试化期限数值
                this.$set(this.formSubmitData, `term_${item.term_code}`, 0)
                // 初试化期限数值单位
                this.$set(this.formSubmitData, `term_${item.term_code}_adj_type`, "")
                // 一下写法不是响应式！！！不要用
                // this.formSubmitData[`term_${item.term_code}`] = item.rate
              })
              // console.log('获取转移曲线编号对应表单参数:', this.curveDeadlineSetList);
            }
          }
        })
      })
    },
    // 查询数据
    findList() {
      this.loading = true
      // 请求表格数据
      findCurve({
        m_id: this.currentRow.id,
        ...this.formSearchData,  //检索条件
      }).then(({data}) => {
        // 给表格数据赋值
        this.tableData = data.rows
        // 给分页总数赋值
        this.tablePage.totalResult = data.total
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      })
    },
    /* 分页组件相关 */
    // 分页事件（页码切换，每页页数切换）
    pageFindList() {

      this.findList()
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [  //动态增加的字段 传进来的
        // { field: 'te_date', title: '生效日期', width: 200 , showOverflow: true},
        {field: 'adj_code', title: '调整项编码', width: 300, sortable: true},
        {field: 'adj_name', title: '调整项名称', width: 300},
        {
          field: 'adj_type', title: '调整类型', width: 300, formatter(obj) {
            if (obj.cellValue == "1") {
              return "曲线调整"
            } else if (obj.cellValue === "2") {
              return "单笔定价"
            } else if (obj.cellValue === "3") {
              return "战略调整"
            } else if (obj.cellValue === "4") {
              return "流动性"
            } else if (obj.cellValue === "5") {
              return "信用"
            } else if (obj.cellValue === "6") {
              return "期限"
            } else if (obj.cellValue === "7") {
              return "准备金"
            }
          }
        },
        {
          field: 'lp_code', title: '所属法人', width: 300, formatter(obj) {
            if (obj.cellValue === "123456") {
              return "中金母公司"
            }
          }
        },
        // {field: 's_date', title: '生效日期', width: 200},
        // {field: 'e_date', title: '失效日期', width: 200},
        {field: 'time_period', title: '日期范围', width: 200},
        {field: 'cv_name', title: '转移曲线', width: 200},
        // {field: 'adj_string', title: '调整信息', width: 200},
        {field: 'remark', title: '备注', width: 200}
      ]
      this.tableColumn = tabCols;
    },
    // 表格工具组-多选删除

    // 表格工具组-新增表单弹窗（需要表单组件）
    handleCreateEmit(type) {
      this.resetFormSubmitData({
        replaceObj: {
          adj_code: this.currentRow.adj_code, //调整项编码
          adj_name: this.currentRow.adj_name, //调整项名称
          adj_type: this.currentRow.adj_type, //调整项名称
          lp_code: this.currentRow.lp_code, //所属法人
        },
        exclude: [
          // 'curr_code'
        ]
      })
      // 重置表单内容
      this.dialogStatus = type
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },
    // 行内按钮-修改数据弹窗（需要表单组件）
    async handleUpdateEmit(row, type) {
      this.dialogStatus = await type
      // 重置表单内容
      await this.resetFormSubmitData({
        resetObj: Object.assign({}, row),
        // 重置数据值
        replaceObj: {},
        // 排除不重置元素
        exclude: []
      })
      this.dialogFormVisible = await true
      await this.$nextTick(() => {
        this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },
    // 单行删除
    handleRmoveColEmit(row) {
      console.log("AJAX 请求删除单行数据");
      // this.$refs.exBaseTable.$refs.xTable.remove(row)
      delCurve({
        m_id: row.id,
        s_date : row.s_date,
      }).then(({data}) => {
        this.findList()
      })
    },

    /* 表单组件相关 */
    // 更新
    handleFromUpdateDataEmit() {
      console.log("this.formSubmitDatathis.formSubmitDatathis.formSubmitDatathis.formSubmitData", this.formSubmitData);
      console.log("表单组件相关:此处运行更新数据操作api等");
      updateCurve({
        m_id: this.currentRow.id,
        term_code : this.term_code,
        ...this.formSubmitData,  //检索条件
      }).then(({data}) => {
        this.findList()
      })
    },

    // 增加
    handleFromCreateDataEmit() {
      console.log("this.formSubmitDatathis.formSubmitDatathis.formSubmitDatathis.formSubmitData", this.formSubmitData);
      console.log("表单组件相关:此处运行添加数据操作api等");
      console.log('this.currentRow', this.currentRow);
      addCurve({
        m_id: this.currentRow.id,
        cv_code: this.currentRow.cv_code,
        ...this.formSubmitData,  //检索条件
      }).then(({data}) => {
        this.findList()
      })
    },

    /* 检索相关 */
    // 检索
    searchEventEmit() {
      this.tablePage.currentPage = 1
      console.log("searchEventEmit", this.formSearchData);
      this.findList()
    },
    // 重置
    resetSearchEventEmit() {
      // 重置代码...
      console.log("resetSearchEventEmit", this.formSearchData);
      this.tablePage.currentPage = 1
      this.findList()
    },
    /* 排序 */
    customSortMethodEmit(property, order) {
      this.sortField = property
      this.sortFlag = order
      console.log('触发排序emit');
      this.findList()

    },

    /* 子表格弹出 */
    viewSonTable(row) {
      this.DialogSonTableVisible = true
    }


  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 测试功能-下拉分页表格
    // this.keyupEvent4()
    // 初始化表格字段
    this.initTableCols()
    // 初始化表格数据
    this.findList()
    // 初始化转移曲线编号数据
    this.findFindCvCode()
    // this.findlp()
    // 初始化转移曲线编号单位
    this.findFindUile()

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>